<!doctype html>
<html lang="zh-CN">

<head>
    <title>个人中心</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/hea-com.css">
    <link rel="stylesheet" href="./css/bind-alipay.css">
    <link rel="stylesheet" href="./css/bind-bank1.css">
    <link rel="stylesheet" href="./css/my.css">
</head>

<body style="background:#F7FBFF;">
    <div id='app' v-cloak>

        <!-- 更换绑定手机号 -->
        <div id='mask' v-if='maskRule==1'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='maskRule==1'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>更换绑定手机号</span>
                        <img class='hover' @click='maskRule=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="原手机号/账号">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="密码">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 更换绑定手机号 -->

        <!-- 修改登陆密码 -->
        <div id='mask' v-if='maskRule==2'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='maskRule==2'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>修改登陆密码</span>
                        <img class='hover' @click='maskRule=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新密码（8至20位字母或数字）">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认新密码">
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 修改登陆密码 -->

        <!-- 修改交易密码 -->
        <div id='mask' v-if='maskRule==3'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='maskRule==3'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>修改交易密码</span>
                        <img class='hover' @click='maskRule=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新密码（8至20位字母或数字）">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认新密码">
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 修改交易密码 -->

        <!-- 绑定支付宝账号 -->
        <bind-alipy :open='maskRule==4?true:false' @close_alipy='maskRule=false'></bind-alipy>
        <!-- 绑定支付宝账号 -->

        <!-- 绑定银行卡 -->
        <bind-bank1 :open='maskRule==5?true:false' @close_bank='maskRule=false'></bind-bank1>
        <!-- 绑定银行卡-->

        <!-- 解绑支付宝/银行卡 -->
        <div id='mask' v-if='maskRule=="untying"'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='maskRule=="untying"'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>解绑支付宝/银行卡</span>
                        <img class='hover' @click='maskRule=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='untying-wrap'>
                            <h5>支付宝号</h5>
                            <p>18875027096</p>
                            <p>是否解绑此微信号，可能会影响您的充值提现</p>
                            <div class='dis-spa'>
                                <button @click='maskRule=false;'>取消</button>
                                <button>确认绑定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 解绑支付宝/银行卡 -->

        <hea-component @bind_alipy="maskRule='4'" @bind_bank="maskRule='5'"></hea-component>

        <div class='margin-center hea-nav'>
            <div class='dis-cen hover' @click='window.location.href="./index.html";'>
                <img src="./img/left.svg" style="width:20px;height:20px;">
                <span>返回首页</span>
            </div>

        </div>

        <div class='margin-center my-wrap'>
            <div class='my-left-wrap'>
                <div>
                    <img src="./img/ava.png" style="width:50px;height:50px;">
                    <span>188****210</span>
                </div>
                <p class='tit-active'><a href="#account">账户信息</a></p>
                <p><a href="#tranpas">交易密码</a></p>
                <p><a href="#mybill">我的账单</a></p>
                <p><a href="#wallet">绑定支付宝</a></p>
                <p><a href="#backcard">绑定银行卡</a></p>
                <p><a href="#loginre">登陆记录</a></p>
                <p><a href="#">关于</a></p>
            </div>
            <div class='my-right-wrap'>
                <div class='balance-wrap'>
                    <div class='ba-info'>
                        <p>账户余额</p>
                        <p>
                            <span>￥</span>
                            <span>2000000.00</span>
                        </p>
                    </div>
                    <div class='ba-info'>
                        <p>可提现余额</p>
                        <p>
                            <span>￥</span>
                            <span>2000000.00</span>
                        </p>
                    </div>
                </div>
                <p class='account-tit'><a name='account'>账户信息</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>头像</span>
                            <img src="./img/ava.png" style="width:80px;height:80px;">
                        </div>
                        <div class='hover dis-cen' @click='$("#upFile").click();'>
                            <span>上传图片</span>
                            <input type="file" style='position:fixed;left:100000px;' id='upFile'>
                            <img src="./img/right.svg" style="width:20px;height:20px;">
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>绑定手机号</span>
                            <span>187****123</span>
                        </div>
                        <div class='hover dis-cen' @click='maskRule=1;'>
                            <span>更换绑定</span>
                            <img src="./img/right.svg" style="width:20px;height:20px;">
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>登陆密码</span>
                            <span>***********</span>
                        </div>
                        <div class='hover dis-cen' @click='maskRule=2;'>
                            <span>修改密码</span>
                            <img src="./img/right.svg" style="width:20px;height:20px;">
                        </div>
                    </div>
                </div>
                <p class='account-tit'><a name="tranpas">交易密码</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>交易密码</span>
                            <span>***********</span>
                        </div>
                        <div class='hover dis-cen' @click="maskRule='3'">
                            <span>修改交易密码</span>
                            <img src="./img/right.svg" style="width:20px;height:20px;">
                        </div>
                    </div>
                </div>
                <div class='dis-spa account-tit' style="padding:20px;">
                    <a name='mybill'>我的账单</a>
                    <div class='dis-cen filter-bill'>
                        <p class='dis-cen hover'>
                            <img src="./img/no.png" style="width:12px;height:12px;">
                            <span>只看充值</span>
                        </p>
                        <p class='dis-cen hover'>
                            <img src="./img/yes.png" style="width:12px;height:12px;">
                            <span>只看提现</span>
                        </p>
                        <p class='dis-cen hover'>
                            <img src="./img/no.png" style="width:12px;height:12px;">
                            <span>只看中奖</span>
                        </p>
                        <p class='dis-cen hover'>
                            <img src="./img/no.png" style="width:12px;height:12px;">
                            <span>只看下注</span>
                        </p>
                    </div>
                </div>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>余额充值</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color'>+1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>时时彩中奖</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <div class='dis-cen' style="margin-right:50px;">
                                <span>待解锁</span>
                                <!-- <img src="./img/why.svg" style="width:15px;height:15px;margin-left:5px;"> -->
                            </div>
                            <span class='mon-color-green'>+1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>时时彩下注</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-red'>-1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>余额提现</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-red'>-1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>余额充值</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-green'>-1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>时时彩中奖</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <div class='dis-cen' style="margin-right:50px;">
                                <span class='mon-color-green'>已解锁</span>
                                <!-- <img src="./img/why.svg" style="width:15px;height:15px;margin-left:5px;"> -->
                            </div>
                            <span class='mon-color-green'>+1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>时时彩下注</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-red'>-1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>余额提现</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-red'>-1000.00元</span>
                        </div>
                    </div>
                </div>
                <p class='dis-cen page-com'>
                    <a href="">-</a>
                    <a href="">首页</a>
                    <a href="">1</a>
                    <a href="" class='active'>2</a>
                    <a href="">3</a>
                    <a href="">...</a>
                    <a href="">12</a>
                    <a href="">12</a>
                    <a href="">12</a>
                    <a href="">尾页</a>
                    <a href="">+</a>
                </p>
                <p class='account-tit'><a name='wallet'>绑定支付宝</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>支付宝账号</span>
                            <span>暂无绑定支付宝账号</span>
                        </div>
                        <div class='hover dis-cen  bank-card'>
                            <p @click='maskRule="untying"'>解绑</p>
                            <p class='hover dis-cen' @click='maskRule=4;'>
                                <span>立即绑定</span>
                                <img src="./img/right.svg" style="width:20px;height:20px;">
                            </p>
                        </div>
                    </div>
                </div>
                <p class='account-tit'><a name="backcard">绑定银行卡（最多5张）</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa' v-for="(val,index) in 5" :key='index'>
                        <div>
                            <span>银行卡1</span>
                            <span>
                                <span style='color:#333333;'>15456***************452</span>&nbsp;&nbsp;<span>(中国工商银行)</span>
                            </span>
                        </div>
                        <div class='dis-cen bank-card '>
                            <p @click='maskRule="untying"'>解绑</p>
                            <p class='hover dis-cen' @click='maskRule=5;'>
                                <span>立即绑定</span>
                                <img src="./img/right.svg" style="width:20px;height:20px;">
                            </p>
                        </div>
                    </div>
                </div>
                <p class='account-tit'><a name="loginre">登陆记录</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>注册时间</span>
                            <span>
                               2018-12-15 16：42：31
                            </span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>最近登陆</span>
                            <span>
                                2018-12-15 16：42：31
                            </span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>最近IP</span>
                            <span>
                                113.251.21.18
                            </span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>最近地址</span>
                            <span>
                                重庆市电信
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src='./js/jquery.min.js'></script>
    <script src="./js/vue.min.js"></script>
    <script src="./component/hea.js"></script>
    <script src="./component/bindAlipay.js"></script>
    <script src="./component/bindBank.js"></script>
    <script src="./js/el/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //各种弹窗控制 false:关闭全部弹窗  1：更换绑定手机号  2:修改登陆密码  3:修改交易密码  4:绑定支付宝  5：绑定银行卡第一步  untying：解绑支付宝/银行卡  
                maskRule: false,
                //绑定银行卡 - 选择证件类型
                seleCerType: '',
                //绑定银行卡 - 选择银行卡
                seleCard: '',
                //绑定银行卡 - 选择银行卡类型
                seleCardType: ''
            },
            mounted: function() {

            },
            methods: {

            }
        });
    </script>

</body>

</html>